import React, { Component } from 'react';
import ReactDom from 'react-dom';
import './style.css';
// 引入 ECharts 模块
import echarts from 'echarts';

const option = {
	title: {
		text: '小部件',
		left: 'center'
	},
	tooltip : {
			formatter: "{a} <br/>{c} {b}"
	},
	toolbox: {
		show: true,
		feature: {
			restore: { show: true },
			saveAsImage: { show: true }
		}
	},
	series: [
		{
			name: '速度',
			type: 'gauge',
			z: 3,
			min: 0,
			max: 220,
			splitNumber: 11,
			radius: '50%',
			axisLine: {
				// 坐标轴线
				lineStyle: {
					// 属性lineStyle控制线条样式
					width: 10
				}
			},
			axisTick: {
				// 坐标轴小标记
				length: 15, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle控制线条样式
					color: 'auto'
				}
			},
			splitLine: {
				// 分隔线
				length: 20, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle（详见lineStyle）控制线条样式
					color: 'auto'
				}
			},
			title: {
				textStyle: {
					// 其余属性默认使用全局文本样式，详见TEXTSTYLE
					fontWeight: 'bolder',
					fontSize: 20,
					fontStyle: 'italic'
				}
			},
			detail: {
				textStyle: {
					// 其余属性默认使用全局文本样式，详见TEXTSTYLE
					fontWeight: 'bolder'
				}
			},
			data: [ { value: 40, name: 'km/h' } ]
		},
		{
			name: '转速',
			type: 'gauge',
			center: [ '20%', '55%' ], // 默认全局居中
			radius: '35%',
			min: 0,
			max: 7,
			endAngle: 45,
			splitNumber: 7,
			axisLine: {
				// 坐标轴线
				lineStyle: {
					// 属性lineStyle控制线条样式
					width: 8
				}
			},
			axisTick: {
				// 坐标轴小标记
				length: 12, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle控制线条样式
					color: 'auto'
				}
			},
			splitLine: {
				// 分隔线
				length: 20, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle（详见lineStyle）控制线条样式
					color: 'auto'
				}
			},
			pointer: {
				width: 5
			},
			title: {
				offsetCenter: [ 0, '-30%' ] // x, y，单位px
			},
			detail: {
				textStyle: {
					// 其余属性默认使用全局文本样式，详见TEXTSTYLE
					fontWeight: 'bolder'
				}
			},
			data: [ { value: 1.5, name: 'x1000 r/min' } ]
		},
		{
			name: '油表',
			type: 'gauge',
			center: [ '77%', '50%' ], // 默认全局居中
			radius: '25%',
			min: 0,
			max: 2,
			startAngle: 135,
			endAngle: 45,
			splitNumber: 2,
			axisLine: {
				// 坐标轴线
				lineStyle: {
					// 属性lineStyle控制线条样式
					width: 8
				}
			},
			axisTick: {
				// 坐标轴小标记
				splitNumber: 5,
				length: 10, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle控制线条样式
					color: 'auto'
				}
			},
			axisLabel: {
				formatter: function(v) {
					switch (v + '') {
						case '0':
							return 'E';
						case '1':
							return 'Gas';
						case '2':
							return 'F';
					}
				}
			},
			splitLine: {
				// 分隔线
				length: 15, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle（详见lineStyle）控制线条样式
					color: 'auto'
				}
			},
			pointer: {
				width: 2
			},
			title: {
				show: false
			},
			detail: {
				show: false
			},
			data: [ { value: 0.5, name: 'gas' } ]
		},
		{
			name: '水表',
			type: 'gauge',
			center: [ '77%', '50%' ], // 默认全局居中
			radius: '25%',
			min: 0,
			max: 2,
			startAngle: 315,
			endAngle: 225,
			splitNumber: 2,
			axisLine: {
				// 坐标轴线
				lineStyle: {
					// 属性lineStyle控制线条样式
					width: 8
				}
			},
			axisTick: {
				// 坐标轴小标记
				show: false
			},
			axisLabel: {
				formatter: function(v) {
					switch (v + '') {
						case '0':
							return 'H';
						case '1':
							return 'Water';
						case '2':
							return 'C';
					}
				}
			},
			splitLine: {
				// 分隔线
				length: 15, // 属性length控制线长
				lineStyle: {
					// 属性lineStyle（详见lineStyle）控制线条样式
					color: 'auto'
				}
			},
			pointer: {
				width: 2
			},
			title: {
				show: false
			},
			detail: {
				show: false
			},
			data: [ { value: 0.5, name: 'gas' } ]
		}
	]
};

export default class Test1 extends Component {
	constructor(props) {
		super(props);
	}
	componentDidMount() {
		// 基于准备好的dom，初始化echarts实例
		const myChart = echarts.init(document.getElementById('test1'));
		// 绘制图表
		option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
		option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
		option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
		option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
		myChart.setOption(option, true);
	}

	render() {
		return (
			<div className='component-layout'>
				<div id='test1' />
			</div>
		);
	}
}

ReactDOM.render(<Test1 />, document.querySelector('#module2_component2_widget'));
